<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-video">
      <input-normal label="视频url" v-model="commonAttr.url" @change="onChangeAttr"></input-normal>
      <add-video-con :item="commonAttr" :compItem="componentData" comAttr="commonAttr"></add-video-con>
      
      <!-- <add-video-btn-con></add-video-btn-con> -->
      <color-normal v-model="commonAttr.playBtnColor" label="播放按钮颜色" format="rgb" @change="onChangeAttr"></color-normal>

      <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-if="commonAttr.isFullScreen" label="页面缩放类型" :valLists="RESIZE_TYPE" v-model="commonAttr.resizeType" @change="onChangeAttr"></dropdown-normal>

      <switch-normal v-model="commonAttr.isDisplayControls" label="显示控制按钮" @change="onChangeAttr"></switch-normal>
      <!-- <switch-normal v-model="commonAttr.isAutoPlay" label="自动播放" @change="onChangeAttr"></switch-normal> -->
      <switch-normal v-model="commonAttr.isAutoPlay" label="自动播放" @change="onChangeAttr"></switch-normal>
      <switch-normal v-if="commonAttr.isAutoPlay" v-model="commonAttr.isMute" label="视频禁音" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isLoop" label="循环播放" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isPreload" label="自动加载" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isDynamic" label="动态视频" @change="onChangeAttr"></switch-normal>
      <!-- <input-normal label="重复开始比例1-100" v-model="commonAttr.repeatStartTime" @change="onChangeAttr"></input-normal> -->
      
      <el-divider content-position="center">播放完属性配置</el-divider>
      <dropdown-normal label="弹出弹层" v-model="commonAttr.popId" :valLists="getLists(PAGE_TYPE_.pop)" @change="onChangeAttr"></dropdown-normal>
      <dropdown-normal label="弹出页面" v-model="commonAttr.pageId" :valLists="getLists(PAGE_TYPE_.page)" @change="onChangeAttr"></dropdown-normal>
      <input-normal v-if="!(commonAttr.popId || commonAttr.pageId)" label="显示组件id" placeholder="$id$" v-model="commonAttr.compId" @change="onChangeAttr"></input-normal>

      <switch-normal v-model="commonAttr.isAddTimeSection" label="添加视频时间段" @change="onChangeAttr"></switch-normal>
      <switch-normal v-if="commonAttr.isAddTimeSection" v-model="commonAttr.isPauseInTimeSection" label="播放到时间段暂停视频" @change="onChangeAttr"></switch-normal>
      <el-button v-if="commonAttr.isAddTimeSection" type="primary"  @click.stop="onAddItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>添加时间段</el-button>
      <el-collapse v-if="commonAttr.isAddTimeSection" v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists"  :name="index+1" :key="'video_'+index" class="list-group-item">
          <template #title>
            第{{DIGIT_MAP[index]}}段视频<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <input-normal label="播放到时间点" placeholder="单位是秒" v-model="item.time" @change="onUpdateItem(index)"></input-normal>
          <dropdown-normal label="弹出弹层" v-model="item.popId" :valLists="getLists(PAGE_TYPE_.pop)" @change="onUpdateItem(index)"></dropdown-normal>
          <input-normal v-if="!item.popId" label="显示组件id" placeholder="$id$" v-model="item.compId" @change="onUpdateItem(index)"></input-normal>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import AddVideoCon from '@/views/components/add-video-con.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'

  import { RESIZE_TYPE } from '@/common/const-canvas'
  import { editUtils } from '@/views/js/edit-utils'
  import { PAGE_TYPE_ } from '@/common/const'

  export default {
    name: "RightVideo",
    mixins: [editUtils],
    setup () {
      return {
        PAGE_TYPE_: PAGE_TYPE_,
        RESIZE_TYPE: RESIZE_TYPE,
      }
    },
    components: {
      RightTemplate,
      AddVideoCon,
      DropdownNormal,
      SwitchNormal,
      InputNormal,
      ColorNormal,
    },
  };
</script>
